<!--
    组件说明：
        props：
            cosList -- 传入数组元素，展示列菜单列表
        自定义事件：
            refresh   -- 点击刷新按钮触发
            cosChange -- 展示列改变时触发
-->
<template>
    <div class="header_style">
        <div>

            <!-- 刷新按钮 begin -->
            <el-tooltip 
            class="item cancelLeft" 
            effect="dark" 
            content="刷新按钮" 
            placement="top-start"
            >
            <el-button 
            @click="refresh"
            icon="el-icon-refresh" 
            class="el-button--small"
            >
            </el-button>
            </el-tooltip>
            <!-- 刷新按钮 end -->

            <!-- 菜单按钮 begin -->
            <el-tooltip 
            class="cancelLeft" 
            effect="dark" 
            content="修改操作" 
            placement="top-start"
            >
            <el-button 
            icon="el-icon-setting" 
            class="el-button--small"
            @click="clickAlter"
            >
            </el-button>
            </el-tooltip>
            <!-- 菜单按钮 end -->

             <!-- 列菜单 begin -->
            <el-popover
            placement="bottom-end"
            width="150"
            trigger="hover"
            >
            <el-checkbox-group 
            v-model="curCosList"
            >
                <el-checkbox 
                :label="item" 
                v-for="(item,index) in allList" 
                :key="item"
                @change="cosChange($event,index)"
                >
                </el-checkbox>
            </el-checkbox-group>
            <el-button 
            icon="el-icon-s-operation" 
            class="el-button--small"
            slot="reference"
            >
            </el-button>
            </el-popover>
            <!-- 列菜单 end -->
        </div>
    </div>
</template>

<script>
export default {

    props: {

        // 基地列表
        cosList: Array
    },

    data() {
        return {

            // 当前显示列
            curCosList: [],

            // // 所有列
            allList: [],
            
        }
    },

    watch: {

        // 监听 cosList 的变化 因为在父组件那边 cosList 是调用接口获取的，有延迟，一开始是空数组后面才有数据
        cosList: {
            handler(newValue, oldValue) {
                this.allList = newValue
                this.curCosList.push(newValue[0])
            } 
        }
    },

    methods: {

        // 列变化
        cosChange(event,index) {
            this.curCosList.length = 0

            this.curCosList.push(this.cosList[index])

            // 自定义 cosChange 事件触发父函数
            this.$emit("cosChange", index, this.cosList[index])
        },

        // 点击跳转到 Setting 页
        clickAlter() {
            this.$router.push("Setting")
        },

        // 点击刷新按钮
        refresh() {
            this.$emit("refresh")
        }
    }

}
</script>

<style scoped lang="scss">
.header_style {
    width: 100%;
    height: 40px;

    div {
        float: right;
    }
}

.cancelLeft {
    margin-left: 0;
}
</style>